<template>
    <div class="show-pc">
        <div class="notification_item">
            <div class="title">消息通知</div>
            <div class="content_box">
                <div class="Select_left">

                    <div class="selector-wrapper" :style="{ maxWidth: '76vw' }">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            {{ item.label }}
                        </div>
                    </div>

                </div>
                <div class="information_right">
                    <!-- 外层滚动容器 -->

                    <div class="information_box" v-for="(item, index) in informationList"
                        v-show="activeKey === 'works'">
                        <div class="title">{{ item.title }}</div>
                        <div class="Time">{{ item.Time }}</div>
                        <div class="Text">
                            {{ item.verbal }}
                        </div>
                    </div>
                    <div v-show="activeKey === 'notifications'">
                        <div class="praise_box" v-show="activeKey === 'notifications'"
                            v-for="(item, index) in designWorks">
                            <div class="praise_top">
                                <div><img :src="item.nameimgUrl" alt="" class="userimg">
                                </div>
                                <div>
                                    <div class="userinfo">
                                        <div class="userinfo_title">{{ item.title }}</div>
                                        <div class="intro_text">
                                            <div>重庆项目</div>
                                            <div>设计部</div>
                                            <div>设计师</div>
                                        </div>
                                    </div>
                                    <div class="upvote">点赞了你的作品</div>
                                    <div style="  color: var(--color-text);">2025</div>

                                </div>
                            </div>
                            <div>
                                <div class="works_box">
                                    <div>
                                        <div style="display: flex; justify-content: center;">
                                            <img :src="item.imgUrl" class="works_img" alt="">
                                        </div>
                                        <div class="works_text">{{ item.description }}</div>
                                    </div>
                                    <div class="works_Time">
                                        <div>{{ item.date }}</div>
                                        <div>{{ item.tag }}</div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
    <!-- 手机 -->
    <div class="show-wap">
        <div class="works_item-wap">
            <div class="title-wap" style="color: var( --color-text);">消息通知</div>
            <div>
                <div class="selector-wrapper-wap">
                    <div class="selector-container-wap" :style="{ maxWidth: '76vw' }">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item-wap"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 外层滚动容器 -->
        <div class="information_right-wap">
            <div class="information_box-wap" v-for="(item, index) in informationList" v-show="activeKey === 'works'">
                <div class="title-name-wap">{{ item.title }}</div>
                <div class="Time-wap">{{ item.Time }}</div>
                <div class="Text-wap">
                    {{ item.verbal }}
                </div>
            </div>
            <div v-show="activeKey === 'notifications'">
                <div class="praise_box-wap" v-show="activeKey === 'notifications'" v-for="(item, index) in designWorks">
                    <div class="praise_top-wap">
                        <div><img :src="item.nameimgUrl" alt="" class="userimg-wap">
                        </div>
                        <div>
                            <div class="userinfo-wap">
                                <div class="userinfo_title-wap">{{ item.title }}</div>
                                <div class="intro_text-wap">
                                    <div>重庆项目</div>
                                    <div>设计部</div>
                                    <div>设计师</div>
                                </div>
                            </div>
                            <div class="upvote-wap">点赞了你的作品</div>
                            <div style="  color: var(--color-text);">2025</div>

                        </div>
                    </div>
                    <div>
                        <div class="works_box-wap">
                            <div>
                                <div style="display: flex; justify-content: center;">
                                    <img :src="item.imgUrl" class="works_img-wap" alt="">
                                </div>
                                <div class="works_text-wap">{{ item.description }}</div>
                            </div>
                            <div class="works_Time-wap">
                                <div>{{ item.date }}</div>
                                <div>{{ item.tag }}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



        </div>

    </div>
</template>

<script setup>
import img_8 from "../../assets/images/local_img/img_6.png"
import img_10 from "../../assets/images/local_img/img_10.png"
const activeKey = ref('works')
const menuItems = ref([
    { key: 'works', label: '系统消息', },
    { key: 'notifications', label: '点赞与收藏', },



]);
const handleSelect = (key) => {

    activeKey.value = key
}

const informationList = ref([
    {
        title: 'PRO上线啦！你的灵感收藏夹从此开挂啦！',
        Time: '2025/3/25',
        verbal: "点赞内容自动记录，每次打开都是升级版灵感库 【收藏夹内搜索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞【PRO身份套装】个人主页专属勋章 + 电子证书，在优设网自带BUFF【课程优惠券】价值30元的优设课堂无门槛优惠券，升级PRO直接领"
    },
    {
        title: 'PRO上线啦！你的灵感收藏夹从此开挂啦！',
        Time: '2025/3/25',
        verbal: "点赞内容自动记录，每次打开都是升级版灵感库 【收藏夹内搜索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞【PRO身份套装】个人主页专属勋章 + 电子证书，在优设网自带BUFF【课程优惠券】价值30元的优设课堂无门槛优惠券，升级PRO直接领"
    },
    {
        title: 'PRO上线啦！你的灵感收藏夹从此开挂啦！',
        Time: '2025/3/25',
        verbal: "点赞内容自动记录，每次打开都是升级版灵感库 【收藏夹内搜索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞【PRO身份套装】个人主页专属勋章 + 电子证书，在优设网自带BUFF【课程优惠券】价值30元的优设课堂无门槛优惠券，升级PRO直接领"
    },
    {
        title: 'PRO上线啦！你的灵感收藏夹从此开挂啦！',
        Time: '2025/3/25',
        verbal: "点赞内容自动记录，每次打开都是升级版灵感库 【收藏夹内搜索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞【PRO身份套装】个人主页专属勋章 + 电子证书，在优设网自带BUFF【课程优惠券】价值30元的优设课堂无门槛优惠券，升级PRO直接领"
    },
    {
        title: 'PRO上线啦！你的灵感收藏夹从此开挂啦！',
        Time: '2025/3/25',
        verbal: "点赞内容自动记录，每次打开都是升级版灵感库 【收藏夹内搜索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞【PRO身份套装】个人主页专属勋章 + 电子证书，在优设网自带BUFF【课程优惠券】价值30元的优设课堂无门槛优惠券，升级PRO直接领"
    },

])

import { ref } from 'vue';



// 点赞数据
const designWorks = ref([
    {
        id: 1,
        title: '候马心购',
        description: '春秋时期就闻名的驿站，如何重新火起来',
        date: '2025-03-24',
        tag: '企业形象设计',
        imgUrl: img_8,
        nameimgUrl: "https://imgs.699pic.com/images/500/472/262.jpg!list1x.v2",
        likers: [
            {
                id: 2,
                avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
            },
            {
                id: 3,

                avatar: 'https://randomuser.me/api/portraits/women/33.jpg'
            },
            {
                id: 4,

                avatar: 'https://randomuser.me/api/portraits/men/34.jpg'
            },
            {
                id: 5,

                avatar: 'https://randomuser.me/api/portraits/women/35.jpg'
            }
        ],
        interactionText: '等6人点拨了你的作品',
        interactionDate: '2025/3/25'
    },
    {
        id: 2,
        title: '乐汇精品生活超市全案设计',
        description: '如何重新火起来',
        date: '2025-03-30',
        imgUrl: img_10,
        nameimgUrl: "https://imgs.699pic.com/images/500/472/262.jpg!list1x.v2",
        tag: '企业形象2222',
        likers: [],
        interactionText: '点赞了你的作品',
        interactionDate: '2025/3/26'
    }
]);





</script>

<style lang="less" scoped>
.notification_item {
    display: grid;

    align-items: center;
    gap: 10px;
    margin: 20px;

    .title {
        color: var(--color-text);
        font-size: 22px;
    }

    .content_box {
        display: flex;
        background-color: var(--color-bg-20);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .Select_left {
            width: 210px;
            // height: 640px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


            .selector-wrapper {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                color: var(--color-text);

                /* 选择器主体 */
                .selector-container {
                    display: flex;
                    width: 100%;
                    max-width: 76vw;
                    /* 最大宽度限制 */
                    scrollbar-width: none;
                    /* 隐藏滚动条（Firefox） */
                }




                .menu-item {
                    white-space: nowrap;
                    margin: 10px 0px;
                    font-size: 16px;
                    color: #999999;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    text-align: center;
                    line-height: 33px;
                    font-size: 16px;
                    // padding: 12px clamp(12px, 2vw, 24px);

                    /* 响应式内边距 */
                    // cursor: pointer;

                    // position: relative;
                    // transition: all 0.3s ease;
                    // flex-shrink: 0;
                    /* 防止内容挤压 */


                }

                .menu-item.active {

                    text-align: center;

                    background-color: #ebebeb;
                    color: #333333;


                }

                .selector-container::-webkit-scrollbar {
                    display: none;
                    /* 隐藏滚动条（Chrome/Safari） */
                }

                // .menu-item:hover {
                //     color: #333333;

                // }


            }
        }

        .information_right {
            flex: 1;

            .scroll-container {
                max-height: 640px;
                overflow-y: auto;
                /* 垂直滚动 */
                padding-right: 8px;
                /* 避免滚动条遮挡内容 */

                /* 自定义滚动条样式（可选） */
                scrollbar-width: thin;
                scrollbar-color: #ccc transparent;
            }

            .scroll-container::-webkit-scrollbar {
                width: 6px;
            }

            .scroll-container::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 3px;
            }

            .information_box,
            .praise_box {
                width: 95%;
                margin: 0 auto;
                margin: 20px;
                padding: 30px 0px;

                // border: 1px solid red;
                border-bottom: 3px solid #f3f3f3;
            }

            .information_box {


                .title {

                    font-size: 16px;
                    font-weight: 800;
                    color: var(--color-text);
                }

                .Time {
                    color: var(--color-text);
                    font-size: 14px;
                    margin: 10px 0px;
                }

                .Text {
                    color: var(--color-text);
                    font-size: 16px;
                }
            }

            .praise_box {

                .praise_top {
                    display: flex;
                    gap: 14px;

                    .userimg {
                        width: 37px;
                        height: 37px;
                        border-radius: 50px;
                    }

                    .userinfo {
                        display: flex;
                        gap: 10px;

                        .userinfo_title {
                            font-size: 16px;
                            color: var(--color-text);
                            font-weight: 800;
                        }

                        .intro_text {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-size: 12px;
                            color: var(--color-text);
                        }


                    }

                    .upvote {
                        color: var(--color-text);
                        font-size: 14px;
                        margin: 6px 0px;
                    }


                }

                .works_box {
                    width: 347px;
                    height: 320px;
                    margin-top: 20px;
                    background-color: var(--color-bg-3b);
                    border-radius: 10px;
                    display: grid;
                    align-items: center;

                    .works_img {
                        width: 95%;
                        height: 192px;
                        border-radius: 10px;

                    }

                    .works_text {
                        color: var(--color-text);
                        font-size: 16px;
                        margin: 8px;
                    }

                    .works_Time {
                        display: flex;
                        justify-content: space-between;
                        margin: 10px;
                        font-size: 14px;
                        color: var(--color-text);
                    }
                }

            }

        }
    }
}



.works_item-wap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0px;

    .title-wap {

        font-size: 18px;
        color: red;
    }


    .selector-wrapper-wap {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 100%;
        overflow-x: auto;
        /* 允许水平滚动 */
        scrollbar-width: none;
        /* 隐藏滚动条（Firefox） */
    }

    .selector-wrapper-wap::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条（Chrome/Safari） */
    }

    .selector-container-wap {
        display: flex;
        border-radius: 8px;
        width: auto;
        /* 改为自动宽度 */
        min-width: 100%;
        /* 确保容器至少和父元素一样宽 */
        padding: 0 10px;
        /* 添加一些内边距 */
        box-sizing: border-box;
        overflow-x: auto;
        /* 允许水平滚动 */
        scrollbar-width: none;
        /* 隐藏滚动条（Firefox） */
    }

    .selector-container-wap::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条（Chrome/Safari） */
    }

    .menu-item-wap {
        padding: 0 10px;
        white-space: nowrap;
        font-size: 16px;
        color: #787a7e;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        line-height: 33px;
        flex-shrink: 0;
        /* 防止菜单项被压缩 */
    }

    .menu-item-wap.active {
        text-align: center;
        line-height: 33px;
        border-radius: 4px;
        background-color: #ffe3e5;
        color: #d1000d;
    }



}

.information_right-wap {
    flex: 1;
    
  

    // .scroll-container-wap {
      
    //     max-height: 640px;
    //     overflow-y: auto;
    //     /* 垂直滚动 */
    //     padding-right: 8px;
   
    //     scrollbar-width: thin;
    //     scrollbar-color: #ccc transparent;
    // }

    // .scroll-container-wap::-webkit-scrollbar {
    //     width: 6px;
    // }

    // .scroll-container-wap::-webkit-scrollbar-thumb {
    //     background: #ccc;
    //     border-radius: 3px;
    // }

    .information_box-wap,
    .praise_box-wap {
        width: 100%;
        margin: 0 auto;
        padding: 30px 0px;
       
        border-bottom: 3px solid #f3f3f3;
    }

    .information_box-wap {
       

        .title-name-wap {

        
            font-weight: 800;
            color: var(--color-text);
        }

        .Time-wap {
            color: var(--color-text);
            font-size: 14px;
            margin: 10px 0px;
        }

        .Text-wap {
            color: var(--color-text);
            font-size: 16px;
        }
    }

    .praise_box-wap {

        .praise_top-wap {
            display: flex;
            gap: 14px;

            .userimg-wap {
                width: 37px;
                height: 37px;
                border-radius: 50px;
            }

            .userinfo-wap {
                display: grid;
                gap: 10px;

                .userinfo_title-wap {
                    font-size: 16px;
                    color: var(--color-text);
                    font-weight: 800;
                }

                .intro_text-wap {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    font-size: 12px;
                    color: var(--color-text);
                }


            }

            .upvote-wap {
                color: var(--color-text);
                font-size: 14px;
                margin: 6px 0px;
            }


        }

        .works_box-wap {
            width: 347px;
            height: 320px;
            margin-top: 20px;
            background-color: var( --color-bg-F);
            border-radius: 10px;
            display: grid;
            align-items: center;

            .works_img-wap {
                width: 95%;
                height: 192px;
                border-radius: 10px;

            }

            .works_text-wap {
                color: var(--color-text);
                font-size: 16px;
                margin: 8px;
            }

            .works_Time-wap {
                display: flex;
                justify-content: space-between;
                margin: 10px;
                font-size: 14px;
                color: var(--color-text);
            }
        }

    }

}
</style>